import { ElMessage, ElNotification } from 'element-plus'
import personApi from '@/api/modules/person'
import subjectApi from '@/api/modules/subConference'

export default function useSubConference(pid: number) {
  let globalOrder = 2

  type SubjectListItem = Required<SubjectApiTypes.update> & {
    tagInputVisible: boolean
    order: number
  }
  const subjectList = ref<SubjectListItem[]>([])

  function updateSubject(list: SubjectApiTypes.subjectItem[]) {
    subjectList.value = list.map(item => ({
      id: item.id,
      meeting: {
        id: pid,
      },
      status: item.status,
      order: item.weight,
      name: item.name,
      personList: item.personList || [],
      tagInputVisible: false,
      // 添加议题持续时间
      durationtime: item.durationtime,
    }))
  }

  function changeTagInputVisible(index: number, value: boolean) {
    subjectList.value[index].tagInputVisible = value
  }

  // 标签输入器的值
  const inputValue = ref('')
  /**
   * 为某议题添加一个列席人员
   * @param index 准备添加的人员所属议题在conferenceList中的索引
   */
  function addPerson(index: number) {
    const name = inputValue.value
    if (name) {
      return personApi.create({
        name,
      }).then((res) => {
        subjectList.value[index].personList.push({
          id: res.data,
          name,
        })
        inputValue.value = ''
        changeTagInputVisible(index, false)
        return res.data
      })
    }
  }
  /**
   * 移出某议题的某个列席人员
   * @param index 准备删除的人员所属议题在conferenceList中的索引
   * @param id 人员id
   */
  function removePerson(index: number, id: number) {
    personApi.delete(id).then(() => {
      const person = subjectList.value[index].personList
      const rindex = person.findIndex((item) => {
        return item.id === id
      })
      person.splice(rindex, 1)
    })
  }

  const subjectModel = reactive({
    title: '',
  })
  const dialogVisible = ref(false)
  function openDialog() {
    dialogVisible.value = true
  }

  /**
   * 新增一项议题
   */
  function createSubject() {
    subjectList.value.push({
      id: -1,
      order: globalOrder++,
      name: subjectModel.title,
      personList: [],
      tagInputVisible: false,
      status: 0,
      meeting: {
        id: pid,
      },
      durationtime: '00:00:00',
    })
    dialogVisible.value = false
  }

  /**
   * 删除一个议题
   */
  function deleteSubject(index: number, id: number) {
    // id为-1说明用户并未保存，直接删除即可，不需要向服务器发起删除请求
    const personIdList = subjectList.value[index].personList.map(item => item.id)
    if (id === -1) {
      subjectList.value.splice(index, 1)
    }
    else {
      subjectApi.delete(id).then(() => {
        subjectList.value.splice(index, 1)
        ElMessage({
          type: 'success',
          message: '议题删除成功',
        })
      })
    }

    // 顺带删除人员
    personIdList.forEach((id) => {
      personApi.delete(id)
    })
  }

  // 开始议题
  function start(index: number, id: number) {
    subjectApi.start(id).then(() => {
      subjectList.value[index].status = 1
      ElNotification({
        title: '议题状态变更',
        message: `${subjectList.value[index].name} 已开始`,
        type: 'success',
        duration: 3000,
      })
    })
  }

  // 结束一个议题
  function finish(index: number, id: number) {
    subjectApi.finish(id).then(() => {
      subjectList.value[index].status = 2
      ElNotification({
        title: '议题状态变更',
        message: `${subjectList.value[index].name} 已结束`,
        type: 'success',
        duration: 3000,
      })
    })
  }

  return {
    subjectList,
    createSubject,
    removePerson,
    addPerson,
    inputValue,
    subjectModel,
    changeTagInputVisible,
    openDialog,
    dialogVisible,
    updateSubject,
    deleteSubject,
    start,
    finish,
  }
}
